
<script>
import { ptToPx, pxToPt } from './utils.js';

export default {
  props: {
    helper: {
      type: Object,
      required: true
    },
    row: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number,
      required: true
    },
    isSelect:{
      type: Boolean,
      default: false,
    }
  },
  render(h) {
    return h('div',
      {
        ref: "rowDiv",
        class: "row",
        style: {
          position: 'relative',
          height: this.row.height,
          zIndex: this.rowIndex,
          overflow: 'visible',
          background: this.isSelect?"rgba(240, 240, 240, 0.7)":'',
          fontWeight: this.isSelect?'bold':'normal',
          color:this.isSelect?'#109968':'black'
        }
      },
      [
        h('div',
          {
            class:'slotDiv'
          },
          this.$slots.default),
        h('div', {
          class: 'dragBlock',
          on: {
            mousedown: this.mousedown
          },
        })
      ]
    )
  },
  data() {
    return {
      isDraging: false,
      startPointX: null,
      startPointY: null,
      startHeight: null,
      endHeight:null,
    }
  },
  inject:['RowHeigthChanged'],
  methods: {
    mousedown(event) {
      this.isDraging = true;
      this.startPointX = event.clientX;
      this.startPointY = event.clientY;
      this.startHeight = this.$refs.rowDiv.offsetHeight;
      window.addEventListener('mousemove', this.mousemove)
      window.addEventListener('mouseup', this.mouseup)
      event.preventDefault();
    },
    mousemove(event) {
      if (this.isDraging && event.movementY != 0) {
        let y = event.clientY - this.startPointY;
        y = y / this.helper.scale;
        // console.log('this.col.width',this.col.width)
        // this.col.width = this.startHeight + x +' px';
        // this.$refs.colDiv.style.width = this.startHeight + x +'px'
        let m = this.startHeight + y;
        
        m = Math.max(0, m)
        this.endHeight = m;
        this.row.height = m + 'px'
      }
    },
    mouseup(event) {
      this.RowHeigthChanged(this.rowIndex, this.endHeight, this.startHeight);
      this.isDraging = false;
      this.startPointX = null;
      this.startPointY = null;
      this.startHeight = null;
      window.removeEventListener('mousemove', this.mousemove)
      window.removeEventListener('mouseup', this.mouseup)
    }
  }
}
</script>

<style scoped>
.dragBlock {
  position: absolute;
  bottom: -2px;
  z-index: 1;
  height: 4px;
  width: 100%;
  background: rgba(111, 14, 149, 0);
  cursor: row-resize;
}

.slotDiv {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中（可选） */
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(154, 154, 154);
  box-sizing: border-box;
  border-width: 0.5px 1px;
}
</style>